/**
 * Created by mac on 2017/7/12.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    FlatList,
    TouchableOpacity,
    DeviceEventEmitter
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

let width = Dimensions.get('window').width;

let count = 0;

import SectionBar from './SectionBar';

export default class CommentProducts extends Component {

    // 构造
      constructor(props) {
        super(props);

        this.productsData = null;

        console.ignoredYellowBox = ['Warning: ...'];

        let heights=[0,0];// 初始状态

        this.state = {
            heights:heights,
            points:[],
            height:30,
        };
      }

    componentWillReceiveProps(old,nextProps) {

        console.log('willReceiveProps');
        console.log('old='+old);
        // console.log('old='+old.data.data.total);
        // console.log('nextProps='+nextProps.data.data.total);

        if (old.data === null){
            return;
        }

        console.log('aaaaaaaaaaaaaa');

        this.productsData = old.data.data.items;
        let points = this.state.points;
        if (points.length>0){
            return;
        }
        for (let i = 0; i < this.productsData.length; i++) {

            let point = {x: 0, y: 0, display: 'none', first: true};

            points.push(point);
        }

        this.setState({
            points: points
        })


    }


    render() {

        let _this = this;

        if(_this.productsData == null){
            return(
                <View/>
            )
        }


        count++;
        console.log('count='+count);

        let views = [];

        _this.productsData.map(function (item,i) {


            let pic = '';
            if (item.tags.length>0){
                pic =item.tags[0].pic;
            }


            let v = (

                <View key={i} style={{ position:'absolute',left:_this.state.points[i].x,width:(width - 5) / 2,
                    top:_this.state.points[i].y,display:_this.state.points[i].display,backgroundColor:'white'
                }} onLayout={(e)=>{

                    console.log('viewheight = '+e.nativeEvent.layout.height );



                        let h = _this.state.heights;

                        let points = _this.state.points;



                        if (points[i].first == false){
                            return;
                        }



                        if(h[0]>0&&h[1]>0){

                            points[i].first = false;

                        }


                        console.log('i=====' + i);

                        if (h[1] >= h[0]) {

                            points[i].x = 0;

                            points[i].y = h[0];

                            h[0] += e.nativeEvent.layout.height;


                        }
                        else {

                            points[i].x = (width - 5) / 2 + 5;

                            points[i].y = h[1];

                            h[1] += e.nativeEvent.layout.height;


                        }


                    _this.view.setNativeProps({
                        style:{
                            backgroundColor:'gray',width: width, height:h[0]>h[1]?h[0]:h[1],
                        }
                    })

                    if (points[i].y==0&&points[i].x != 0) {
                        points[i].first = false;
                    }


                     points[i].display = 'flex';

                        _this.setState({
                            points: points,
                            heights: h,
                            height:h[1]>h[0]?h[1]:h[0],
                        })




                }}>
                    <CachedImage
                        style={{width: (width - 5) / 2, height: (width - 5) / 2}}
                        source={{uri: item.pic}}/>
                    <CachedImage style={{width:50,height:50,position:'absolute',left:2,top:2}} source={{uri:pic}}/>
                    <View style={{paddingLeft:5,paddingTop:5,height:70}}>
                        <Text>{item.alias}</Text>
                        <Text style={{fontSize:12,color:'gray',paddingTop:5}}>{item.name}</Text>
                        <Text style={{color:'red',flexDirection:'row',paddingTop:5}}>
                            {item.salesPrice.toFixed(2)+'  '}
                            <Text style={{paddingBottom:0,fontSize:10, textDecorationLine:'line-through',color:'gray'}}>{item.marketPrice.toFixed(2)}</Text>
                        </Text>
                        <TouchableOpacity onPress={(e)=>{

                            console.log('onpress='+e.nativeEvent.pageX);
                            console.log('onpress='+e.nativeEvent.pageY);
                            console.log('onpress='+e.nativeEvent.locationX);
                            console.log('onpress='+e.nativeEvent.locationY);

                            let point = {
                                x:e.nativeEvent.pageX-e.nativeEvent.locationX,
                                y:e.nativeEvent.pageY-e.nativeEvent.locationY
                            }

                            DeviceEventEmitter.emit('ClickCart',point);




                        }} style={{position:'absolute',bottom:10,right:10}}>
                            <Image source={require('./images/icon-add-to-cart-green.png')} style={{width:37*0.7,height:33*0.7}}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{width:(width - 5) / 2,height:1,backgroundColor:'lightgray',}}/>
                    <Text numberOfLines={3} style={{marginTop:5,paddingLeft:5,fontSize:12,width:(width - 5) / 2,minHeight:20}} onLayout={(e)=> {


                    }

                    }>
                        <Text style={{fontSize:12,color:'#66b219'}}>主人说:</Text>
                        {item.remarks}
                        </Text>
                    <View  style={{paddingTop:5,width:(width - 5) / 2,height:5,backgroundColor:'lightgray'}}/>
                </View>

            )

            views.push(v);
        })

        return (
            <View
                style={{flex:1,backgroundColor:'lightgray',width: width}} ref={(e)=>this.view=e}
            >
                {views}

            </View>
        )

    }
}